<template>
  <div class="personal-cont">

    <div class="my-course">
      <div class="title">
        <div class="lab-title">推荐课程</div>
        <div class="tit-Item"><span><em class="active">按用户喜好进行推荐</em> </span><span><em class="active"></em></span>
        </div>
      </div>

      <div class="cont">
        <div v-for="course in courseList" class="col-lg-6">
          <div class="item">
            <div class="title">
              <span >{{course.name}}</span>
              <br><br>
              <span class="lab">课程分类:{{course.mt}}/{{course.st}}</span>
              <span class="lab"></span>

            </div>
            <a @click="redirect(course.id)">
              <div class="portrait" align="center">
                <img :src="imgUrl+course.pic" alt="" style="width:300px;height: 173px">
              </div>
              <div class="parting"></div>
            </a>
            <div class="butItem text-center">
              <router-link :to="'/learning/'+course.id+'/0'" class="golearing" target="_blank">
                开始学习
              </router-link>
              <a @click="collect_course(course.id)" class="classcom">课程收藏</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import * as recommendApi from '../api/recommend'
    import * as systemApi from '@/base/api/system'
    import utilApi from '../../../common/utils';

    export default {
        components: {},
        data() {
            return {
                userId: '',
                page: 1,
                size: 20,
                courseList: [{
                    id: "4028fe8170f29ab40170f3af885b0003",
                    name: "英语高级课程",
                    users: '中学',
                    grade: "200003",
                    description: '英语高级',
                    pic: 'group1/M00/00/00/wKh-bl65lhaAS_0FAAegjh4-P08285.jpg',
                    mt: '1-1',
                    st: '1-1-1'
                }], imgUrl: 'http://img.sfs.com/',

            }
        },

        methods: {
            //获得当前登录用户
            refresh_user: function () {
                let activeUser = utilApi.getActiveUser();
                if (activeUser) {
                    this.logined = true;
                    this.userId = activeUser.userid;
                }
            },
            //重定向到课程详情页面
            redirect: function (courseId) {
                window.location = "http://www.sfs.com/course/detail/" + courseId + ".html";
            },
            //收藏课程
            collect_course: function (courseId) {
                recommendApi.collect_course(this.userId, courseId).then((res) => {
                    if (res.success) {
                        this.$message({
                            message: '收藏成功',
                            type: 'success'
                        });
                    } else {
                        if (res.message) {
                            this.$message({
                                message: res.message,
                                type: 'error'
                            });
                        } else {
                            this.$message.error('收藏失败');
                        }
                    }
                });
            },

        },
        created() {
            //获取当前登录用户
            this.refresh_user();
            //获取推荐课程
            recommendApi.recommend_course(this.userId).then((res) => {
                if (res) {
                    this.courseList = res;
                }
            });
        },
        mounted() {

        }
    }

</script>

<style>
  @import './../../../../static/plugins/normalize-css/normalize.css';
  /*@import './../../../../static/plugins/bootstrap/dist/css/bootstrap.css';*/
  @import './../../../../static/css/page-learing-personal.css';

</style>
